$tags-prefix-cls: #{$css-prefix}tags;

.#{$tags-prefix-cls} {
  position: relative;
  display: flex;
  width: 100%;
  height: 100%;
  padding: 0 20px;

  .#{$tags-prefix-cls}-nav-prev,
  .#{$tags-prefix-cls}-nav-next {
    width: 32px;
  }

  .#{$tags-prefix-cls}-nav-scroll {
    position: relative;
    flex: 1;
    display: flex;
    align-items: flex-end;
    height: 100%;

    overflow: hidden;
    white-space: nowrap;

    .#{$tags-prefix-cls}-nav {
      position: relative;
      display: inline-flex;

      // align-items: flex-end;
     
      height: 52px;
      transition: transform 0.5s ease-in-out;

      .#{$tags-prefix-cls}-tab {
        position: relative;
        display: flex;
        flex: 0 0 auto;
        align-items: center;
        justify-content: space-between;
        padding: 0 42px;
        height: 52px;
        color: #fff;
        border-radius: 10px 10px 0 0;
        transition: transform 0.5s ease-in-out;
        &:hover {
          // z-index: 2;
          // background-color: red;
        }

        .title {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 100%;
          height: 100%;
          white-space: nowrap;
          font-size: 16px;
          text-overflow: clip;
          overflow: hidden;
          cursor: pointer;
        }

        .close {
          position: absolute;
          right: 0;
          bottom: 0;
          top: 0;
          z-index: 12;
          display: flex;
          align-items: center;
          justify-content: center;
          width: 32px;
        }

        &.#{$tags-prefix-cls}-tab-active {
          background-color: $tags-active-color;
          box-sizing: border-box;
          &::after,
          &::before {
            position: absolute;
            bottom: 0;
            z-index: 1;
            content: "";
            width: 10px;
            height: 10px;
            background-color: $tags-active-color;
          }

          &::before {
            left: -10px;
          }

          &::after {
            right: -10px;
          }

          .title {
            color: #000;
            &::before,
            &::after {
              content: "";
              position: absolute;
              bottom: 0;
              z-index: 2;
              width: 20px;
              height: 34px;
              border-radius: 10px;
              background-color: $theme-header;
            }

            &::before {
              left: -20px;
            }
            &::after {
              right: -20px;
            }
          }
          .close {
            background-color: $theme-content;
            border-top-right-radius: 10px;
            z-index: 3;
            color: #333;
            i:hover {
              color: #444;
              background: #d8d8d8;
              border-radius: 50%;
              color: #fff;
              width: 18px;
              height: 18px;
              line-height: 18px;
              /* font-size: 32px; */
              font-weight: bold;
            }
          }
        }
        &:not(.#{$tags-prefix-cls}-tab-active) {
          &::after {
            content: "";
            position: absolute;
            right: -1px;
            height: 20px;
            width: 1px;
            background-color: $theme-content;
          }
        }
      }
    }
  }
}
